<script setup lang="ts">
import {DataTotals} from "../types/dataTotalType";

import IconChat from '../assets/icon_chat.png';
import IconEducational from '../assets/icon_educational.png';
import IconExamination from '../assets/icon_examination.png';
import IconPepole from '../assets/icon_pepole.png';
import IconTimer from '../assets/icon_timer.png';

let datas: DataTotals = [{
  title: '覆盖人数',
  value: 100,
  icon: IconChat
}, {
  title: '学习人数',
  value: 100,
  icon: IconEducational
}, {
  title: '活跃时长',
  value: 9999,
  icon: IconExamination
}, {
  title: '学习时长',
  value: 9999,
  icon: IconPepole
}, {
  title: '总学分',
  value: 99,
  icon: IconTimer
}];
</script>

<template>
  <div class="mianBody">
    <div  v-for="(elment,index) in datas" class="mainStyle" :key="index">
    <img :src=elment.icon width="48" height="48">
    <div class="fontSmall">{{elment.title}}</div>
    <div class="containerBottom">
      <div class="fontBig">{{elment.value}}</div>
      <div class="fontPepol">人</div>
    </div>
    </div>
  </div>
</template>

<style scoped>
.mianBody{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  width: 100%;
  gap:20px;

}
.mainStyle {
  flex-direction: row;
  display: flex;
  background-image: url('../assets/blue_btn_background.png'); /* 设置背景图片 */
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  padding-top: 26px;
  padding-bottom: 26px;
  padding-left: 19px;
  padding-right: 19px;
  border-radius: 6px 6px 6px 6px;
  align-items: center;
}

.fontBig {
  margin-left: 10px;
  color: #ffffff;
  font-size: 25px;
  font-weight: bold;
  text-align: end;
  align-items: end;
  line-height: 1;
}

.fontSmall {
  color: #ffffff;
  margin-left: 20px;
  font-size: 10px;
  align-items: end;
  line-height: 30px;
  white-space: nowrap; /* 设置文本不换行 */
}

.containerBottom {
  display: flex; /* 设置父容器为Flex容器 */
  align-items: flex-end; /* 使子元素的底边对齐 */
}

.fontPepol {
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  text-align: end;
}

</style>